<template>
  <div>
    <van-row class="searchGoodsListRow">
      <van-col span="8">
        <p>综合</p>
      </van-col>
      <van-col span="8">
        <p>价格</p>
      </van-col>
      <van-col span="8">
        <p>分类</p>
      </van-col>
    </van-row>

    <!-- 商品列表 -->
    <div class="searchGoosList">
      <van-row class="allGoods">
        <van-col span="12" v-for="(item, index) in directlyList" :key="item.id">
          <div class="goodsItem">
            <img style="width: 4.53rem;background-color: #f4f4f4; border-radius: .27rem; " :src="item.listPicUrl">
            <p>{{item.name}}</p>
            <span class="newPrice">￥{{item.retailPrice}}</span>
            <span class="oldPrice" v-if="item.counterPrice">￥{{item.counterPrice}}</span>
          </div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { onMounted, ref } from 'vue';
import searchApi from '@/api/search'
import { useRoute } from 'vue-router';
import { showNotify } from 'vant';
import type { ItemModel } from '@/api/homeList'
const route = useRoute()

// 存储商品列表数据
const directlyList = ref<ItemModel[]>([])
// 根据关键字获取商品列表数据
const getSearchGoodsListData = async ()=>{
  try {
    let result = await searchApi.getSearchGoodsList(route.query.keyword as string)
    // console.log('搜索到的数据',result);
    directlyList.value = result.data.directlyList
  } catch (error) {
    showNotify({ type: 'danger', message: '获取商品列表失败，请重试' });
  }
}

onMounted(()=>{
  getSearchGoodsListData()
})

</script>

<style scoped>
.searchGoodsListRow {
  text-align: center;
  font-size: .37rem;
  background-color: #fafafa;
  height: 1.07rem;
  line-height: 1.07rem;
  border-bottom: .03rem solid #d9d9d9;
}

.searchGoosList p {
  text-align: center;
  line-height: .61rem;
}

.searchGoosList>p:nth-child(1) {
  font-size: .43rem;
  padding-top: .53rem;
}

.searchGoosList>p:nth-child(2) {
  font-size: .32rem;
  color: #999;
}

.searchGoosList .allGoods {
  margin-top: .21rem;
  margin-left: .27rem;

}

.searchGoosList .allGoods .goodsItem {
  width: 4.6rem;
  height: 7.38rem;
}

.searchGoosList .allGoods .goodsItem p {
  font-size: .37rem;
  text-align: left;
}

.searchGoosList .allGoods .goodsItem .newPrice {
  color: red;
  font-size: .43rem;
  font-weight: bold;
}

.searchGoosList .allGoods .goodsItem .oldPrice {
  color: #999;
  text-decoration: line-through;
  font-size: .32rem;
}
</style>